<template>
  <div class="mod-menu">
    <el-form ref="paramsRef" :inline="true" :model="params">
      <!-- v-if="isAuth('sys:balance:bill:list')" -->
      <el-form-item label="会员ID" prop="userId">
        <el-input v-model="params.userId" placeholder="会员ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="会员昵称" prop="userName">
        <el-input v-model="params.userName" placeholder="会员昵称" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单时间">
        <el-date-picker
          v-model="timer"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleTimer"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getDataList()">查询</el-button>
        <el-button type="warning" @click="resetparams()">重置</el-button>
        <el-button type="primary" @click="exportAll()">导出数据</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border @sort-change="changeTableSort" style=" width: 100%">
      <el-table-column prop="user_id" align="center" label="会员ID">
      </el-table-column>
      <el-table-column prop="user_name" align="center" label="会员昵称">
      </el-table-column>
      <el-table-column prop="old_value" align="right" label="操作前的值">
      </el-table-column>
      <el-table-column prop="operation" align="center" label="操作">
      </el-table-column>
      <el-table-column prop="operation_value" align="right" label="操作值">
      </el-table-column>
      <el-table-column prop="new_value" align="right" label="操作后的值">
      </el-table-column>
      <el-table-column prop="create_time" sortable="custom" align="center" label="操作时间" width="200" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="params.page"
                   :page-sizes="[10, 20, 50, 100]" :page-size="params.limit" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import Vue from 'vue'
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      params: {
        page: 1,
        limit: 10,
        userId: '',
        userName: '',
        startTime: undefined,
        endTime: undefined
      },
      timer: null,
      totalPage: 0,
      dataList: [],
      dataListLoading: false
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleTimer(e) {
      if (e) {
        this.params.startTime = e && e[0]
        this.params.endTime = e && e[1]
      } else {
        this.params.startTime = undefined
        this.params.endTime = undefined
      }
    },
    changeTableSort (e) {
      if (e.order == 'descending') {
        this.params.sort_type = 'DESC'
      } else if (e.order == 'ascending') {
        this.params.sort_type = 'ASC'
      }
      this.params.sort_field = e.prop
      this.getDataList()
    },
    getList () {
      this.dataListLoading = true
      seviceApi.getAccountOperationLogList(this.params).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
        this.dataListLoading = false
      }).catch(err =>{
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.params.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.params.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.params.page = 1
      this.getList()
    },
    resetparams () {
      this.params.sort_field = ''
      this.params.sort_type = 'ASC'
      this.$refs.paramsRef.resetFields()
      this.timer = null
      this.params.startTime = undefined
      this.params.endTime = undefined
      this.getDataList()
    },
    // 导出数据
    exportAll () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          window.location.href = `${this.$config.SERVER_URL}/admin/account/operationlog/export?userId=${this.params.userId}&userName=${this.params.userName}&startTime=${this.params.startTime}&endTime=${this.params.endTime}&sort_field=${this.params.sort_field}&token=${token}`
        })
        .catch(() => { })
    }
  }
}
</script>
<style lang="scss">
.addCls {
  font-size: 24px;
  color: #17b3a3;
  margin-left: 20px;
  cursor: pointer;
}

.el-icon-remove-outline {
  color: rgb(255, 0, 0);
}
</style>
